<template>
  <view class="year-page">
    <view class="title-logo" @tap="uploadImg">
      <!-- 123 -->
      <!-- <image class="logo" src="../../images/yearPage/title-logo.png" mode="widthFix" /> -->
    </view>
    <!-- <img class="top_right" src="../../images/yearPage/top_right.png" /> -->
    <view class="form">
      <view class="form-item">
        <view class="left-title">组织名称</view>
        <input
          type="text"
          class="input"
          @input="dealValue('orgName', $event)"
          :value="form.orgName"
          maxlength="18"
          placeholder-class="placehold"
          placeholder="公司、商会、单位等"
        />
      </view>
      <view class="form-item-line"></view>
      <view class="form-item">
        <view class="left-title">姓名</view>
        <input
          type="text"
          class="input"
          @input="dealValue('linkName', $event)"
          :value="form.linkName"
          maxlength="11"
          placeholder-class="placehold"
          placeholder="选填"
        />
      </view>
      <view class="form-item-line"></view>
    </view>
    <view class="upload">
      <view class="upload-title">
        <image src="../../images/yearPage/upload-title.png" mode="widthFix" />
      </view>
      <view class="upload-img" @tap="clk">
        <view class="upload-btn" v-show="!form.fileUrl">
          <image src="../../images/yearPage/add.png" mode="widthFix" />
          <text>上传照片</text>
        </view>
        <text v-show="!form.fileUrl" class="upload-img-title"
          >人物清晰、背景干净</text
        >
        <image
          v-show="form.fileUrl"
          :src="form.fileUrl"
          mode="heightFix"
          class="avatar"
        />
      </view>
    </view>
    <view class="finish" @tap="createPoster()">生成海报</view>
    <view class="er-code">
      <image src="../../images/yearPage/er-code.png" mode="widthFix" />
    </view>
    <view class="upload-img-title bottom"
      >一起来往提供技术支持，有问题请<a href="tel:17864218758"
        >联系客服</a
      ></view
    >

    <!-- 弹层海报 -->
    <view class="zhezhao" v-show="is_Show">
      <view class="popup" @longpress="dataTongji('yqlw_h5_year_img_save')">
        <view id="poster" class="haibao">
          <view v-show="!base64">
            <img class="bj" src="../../images/yearPage/bainian_640.png" />
            <view class="people">
              <img id="img" :src="haibaoData.fileUrl" />
            </view>
            <view class="gs">{{ haibaoData.orgName }}</view>
            <view class="name">{{ haibaoData.linkName }}</view>
            <img class="ewm" src="../../images/yearPage/bainian_zs.png" />
          </view>
          <img
            :src="base64"
            style="width: 640rpx; height: 1138rpx"
            v-if="base64"
          />
        </view>
        <img
          class="gb"
          @tap="closePoster()"
          src="../../images/year/close.png"
        />
        <view class="btn"> 长按海报，发送给朋友或保存图片 </view>
      </view>
    </view>
    <avatar
      @upload="doUpload"
      quality="1"
      ref="avatar"
      selWidth="200upx"
      selHeight="200upx"
      canRotate="true"
    ></avatar>
  </view>
</template>

<script>
import avatar from "../../module/yq-avatar/yq-avatar.vue"; //图片剪裁
import html2canvas from "html2canvas";
import request from "../../utils/request.js";
import EXIF from "../../utils/exif.js";
import $ from "../../utils/jquery.js";
import * as qiniu from "qiniu-js";
let jweixin = require("jweixin-module"); //引入配置
export default {
  components: {
    avatar,
  },
  data() {
    return {
      array: ["青岛", "杭州"],
      index: "",
      is_Show: false,
      form: {
        orgName: "",
        area: "",
        linkName: "",
        linkPost: "",
        type: 2,
        templateType: 1,
        fileUrl: "",
        firstUrl: "",
        fileType: 1,
        fileName: "",
        fileExtension: "",
        fileSize: 1024,
      },
      upToken: "",
      qiniuyun: "",
      qiniuUrl: "",
      base64: "",
      indexOfTime: 0,
      base64Url: "",
      haibaoData: "",
      urls: [],
    };
  },
  onLoad() {
    let token = uni.getStorageSync("token");
    if (!token) {
      this.configWeiXin(); //掉公众号授权
    } else {
      this.dataTongji("yqlw_h5_year_visitor");
    }
    this.getUpToken();
    this.handleShare();
  },
  methods: {
    uploadImg() {
      jweixin.ready(function () {
        jweixin.chooseImage({
          count: 1, // 默认9
          sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
          success: function (res) {
            var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            console.log(res);
            jweixin.getLocalImgData({
              localId: localIds[0], // 图片的localID
              success: function (img) {
                var localData = img.localData; // localData是图片的base64数据，可以用img标签显示
                console.log(img);
              },
            });
          },
        });
      });
    },
    bindPickerChange: function (e) {
      console.log("picker发送选择改变，携带值为", e.target.value);
      this.index = e.target.value;
      this.form.area = this.array[this.index];
    },
    doUpload(rsp) {
      this.$set(this.urls, rsp.index, rsp.path);
      this.form.fileUrl = rsp.path;
      uni.showLoading({
        title: "上传中",
      });
      uni.uploadFile({
        url: "https://up-z0.qiniup.com",
        filePath: rsp.path,
        name: "file",
        formData: {
          token: this.upToken,
        },
        success: (uploadFileRes) => {
          this.form.fileUrl =
            this.qiniuyun + "/" + JSON.parse(uploadFileRes.data).key;
          if (JSON.parse(uploadFileRes.data).key) {
            uni.hideLoading();
          }
        },
      });
    },
    clk() {
      this.$refs.avatar.fChooseImg(2, {
        selWidth: "450upx",
        selHeight: "450upx",
        inner: false,
        canRotate: false,
      });
    },
    createPoster() {
      if (!this.form.orgName) {
        uni.showToast({
          title: "请输入组织名称",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      // if(!this.form.linkName){
      // 	uni.showToast({
      // 		title: "请输入姓名",
      // 		duration: 2000,
      // 		icon: "none",
      // 	});
      // 	return
      // }
      if (!this.form.fileUrl) {
        uni.showToast({
          title: "请上传海报照片",
          duration: 2000,
          icon: "none",
        });
        return;
      }
      uni.showLoading({
        title: "海报生成中...",
      });
      this.save();
    },
    closePoster() {
      this.is_Show = false;
      this.base64 = "";
      this.lock = false;
    },
    toImg() {
      let that = this;
      // 使页面滑到顶部，避免顶部出现白边
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 0,
      });
      var dom = document.getElementById("poster"); // 获取dom元素
      var width = dom.offsetWidth; //dom宽
      var height = dom.offsetHeight; //dom高
      html2canvas(dom, {
        dpi: window.devicePixelRatio * 4,
        scale: 3.361, // 缩放倍数
        width: width, //dom 原始宽度
        height: height,
        scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
        scrollX: 0,
        useCORS: true, //支持跨域，但好像没什么用
        async: false, //是否异步解析和呈现元素
        letterRendering: true,
      }).then((canvas) => {
        uni.hideLoading();
        // 将生产的canvas转为base64图片
        that.base64 = canvas.toDataURL("img/png", 1.0);
      });
    },
    handleShare() {
      //分享功能
      let that = this;
      request({
        url: "h5/login/jsapiSignature",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7, //post一定要带这个header，被这里坑了半天
        },
        data: {
          url: window.location.href.split("#")[0],
        },
      }).then((res) => {
        if (res.statusCode == 200) {
          jweixin.config({
            debug: false,
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名，见附录1
            jsApiList: [
              "updateAppMessageShareData",
              "updateTimelineShareData",
              "chooseImage",
              "getLocalImgData",
            ],
          });

          jweixin.ready(function () {
            let imgT =
              "https://img.yiqilaiwang.com/3a6f6372-c529-4fd6-b108-6a30d1b71023.png";
            if (that.is_Show) {
              var linkT =
                that.globalData.domain +
                "/pages/payNewYear/detail?id=" +
                that.haibaoData.id;
            } else {
              var linkT = that.globalData.domain + "/pages/payNewYear/index";
            }

            jweixin.updateTimelineShareData({
              title:
                "自助拜年海报模板出炉！企业、商会、个人皆可自由定制拜年海报！", //分享标题
              desc: "今年拜年，与众不同！现在就定制自己的海报", // 分享描述
              link: linkT, //分享链接
              imgUrl: imgT, //分享图标
            });
            jweixin.updateAppMessageShareData({
              title:
                "自助拜年海报模板出炉！企业、商会、个人皆可自由定制拜年海报！", //分享标题
              desc: "今年拜年，与众不同！现在就定制自己的海报", // 分享描述
              link: linkT, //分享链接
              imgUrl: imgT, //分享图标
            });
          });
        } else if (res.data.code == 401) {
          that.configWeiXin();
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    configWeiXin() {
      let _this = this;
      //获取公众号配置
      request({
        //获取appid
        url: "h5/login/jsapiSignature",
        method: "POST",
        data: {
          url: window.location.href.split("#")[0], //后台通过域名进行授权
        },
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
        },
      }).then((res) => {
        var jsApiList = [
          "onMenuShareAppMessage",
          "onMenuShareTimeline",
          "updateAppMessageShareData",
          "updateTimelineShareData",
          "hideOptionMenu",
          "showOptionMenu",
        ];
        if (res.statusCode == 200) {
          //获取成功
          jweixin.config({
            debug: false, // 开启调试模式，发布的时候改为false
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名
            jsApiList: jsApiList, // 必填，需要使用的JS接口列表
          });

          jweixin.ready(function () {
            //配置成功
            _this.wxJsdkAuthorize(res.data.appId); //调用公众号-授权
          });
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    //公众号授权
    wxJsdkAuthorize(_appid) {
      let _this = this;
      let link = window.location.href;
      //授权时会跳到微信的页面，然后会自动调回来带着一个code
      let _code = "";
      if (link.includes("code=")) {
        _code = link.split("code=")[1].split("&")[0];
      }
      // 如果拿到_code，传到后台
      if (_code) {
        console.log(_code, "打印code");
        request({
          url: "h5/login/getOpenIdV2", //拿oponid
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
          },
          data: {
            code: _code,
          },
        }).then((res) => {
          // console.log(res, '获取oponId')
          if (res.data.code == 200) {
            if (res.data.data.isLogin) {
              uni.setStorageSync("token", res.data.data.token); //缓存token
              uni.setStorageSync("personal", res.data.data);
              this.dataTongji("yqlw_h5_year_visitor");
            }
          } else {
            // uni.showToast({
            // 	title: "微信授权失效，请关闭重试",
            // 	duration: 2000,
            // 	icon: "none"
            // });
          }
        });
      } else {
        let appid = _appid;
        let uri = encodeURIComponent(link);
        let authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
        window.location.href = authURL;
      }
    },
    dealValue(val, e) {
      var pattern = new RegExp(
        "[^\\u0020-\\u007E\\u00A0-\\u00BE\\u2E80-\\uA4CF\\uF900-\\uFAFF\\uFE30-\\uFE4F\\uFF00-\\uFFEF\\u0080-\\u009F\\u2000-\\u201f\r\n]"
      );
      this.form[val] = e.detail.value;
      setTimeout(() => {
        this.form[val] = e.detail.value;
        this.form[val] = this.form[val].trim();
        this.form[val] = this.form[val].replace(pattern, "");
      }, 0);
    },
    // 上传图片
    handleImgsPush() {
      var that = this;
      let config = {
        useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
        region: qiniu.region[this.region[2]], // ,当为 null 或 undefined 时，自动分析上根据具体提示修改上传地区传域名区域
      };
      if (this.openApp.iswx == "wx") {
        // wx环境
        jweixin.ready(function () {
          jweixin.chooseImage({
            count: 1, // 默认9
            sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
              uni.showLoading({
                title: "上传中",
              });

              var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
              jweixin.getLocalImgData({
                localId: localIds[0], // 图片的localID
                success: function (img) {
                  var localData = img.localData; // localData是图片的base64数据，可以用img标签显示
                  if (localData.indexOf("data:image") != 0) {
                    //判断是否有这样的头部
                    localData = "data:image/jpeg;base64," + localData;
                  }
                  localData = localData
                    .replace(/\r|\n/g, "")
                    .replace("data:image/jpg", "data:image/jpeg");
                  let localDataToQNY = localData.replace(
                    "data:image/jpeg;base64,",
                    ""
                  );
                  // that.form.fileUrl = localData;
                  let file = that.dataURLtoFile(localData, "weixin");

                  console.log("初始文件大小", file.size / 1024 / 1024);

                  if (file.size / 1024 / 1024 > 3) {
                    // 压缩
                    that.$ImgCompress.photoCompress(
                      file,
                      {
                        quality: 0.8,
                        width: 1280,
                      },
                      (base64Codes) => {
                        let blob = that.$ImgCompress.convertBase64UrlToBlob(
                          base64Codes
                        );
                        let { lastModified, type } = file;
                        let compress_file = new File([blob], file.name, {
                          type: type,
                          lastModified: lastModified,
                        });
                        file = compress_file;
                        console.log("压缩后", file);
                        that.form.fileName = file.name;
                        let index = file.name.lastIndexOf(".");
                        that.form.fileExtension = file.name.substring(
                          index + 1,
                          file.name.length
                        );
                        that.form.fileSize = parseFloat(
                          file.size / 1024
                        ).toFixed(1);
                        let putExtra = {
                          fname: file.name, //文件原文件名
                          params: {}, //用来放置自定义变量
                          // mimeLimit:"",
                          // mimeLimit: this.mimeLimit,
                          // 	mimeType: this.mimeType //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
                        };
                        var observable = qiniu.upload(
                          file,
                          null,
                          that.upToken,
                          putExtra,
                          config
                        );
                        observable.subscribe({
                          next: (result) => {
                            // 主要用来展示进度
                          },
                          error: (errResult) => {
                            uni.showToast({
                              title: errResult,
                              duration: 2000,
                              icon: "none",
                            });
                            uni.hideLoading();
                          },
                          complete: (result) => {
                            var url = encodeURI(
                              that.qiniuyun +
                                "/" +
                                result.key +
                                "?imageMogr2/strip"
                            );
                            // console.log(url)
                            (that.form.fileUrl = url), uni.hideLoading();
                            uni.showToast({
                              title: "上传成功",
                              duration: 1500,
                              icon: "none",
                            });
                          },
                        });
                      }
                    );
                  } else {
                    that.form.fileName = file.name;
                    let index = file.name.lastIndexOf(".");
                    that.form.fileExtension = file.name.substring(
                      index + 1,
                      file.name.length
                    );
                    that.form.fileSize = parseFloat(file.size / 1024).toFixed(
                      1
                    );
                    let putExtra = {
                      fname: file.name, //文件原文件名
                      params: {}, //用来放置自定义变量
                      // mimeLimit:"",
                      // mimeLimit: this.mimeLimit,
                      // 	mimeType: this.mimeType //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
                    };
                    var observable = qiniu.upload(
                      file,
                      null,
                      that.upToken,
                      putExtra,
                      config
                    );
                    observable.subscribe({
                      next: (result) => {
                        // 主要用来展示进度
                      },
                      error: (errResult) => {
                        uni.showToast({
                          title: errResult,
                          duration: 2000,
                          icon: "none",
                        });
                        uni.hideLoading();
                      },
                      complete: (result) => {
                        var url = encodeURI(
                          that.qiniuyun + "/" + result.key + "?imageMogr2/strip"
                        );
                        // console.log(url)
                        (that.form.fileUrl = url), uni.hideLoading();
                        uni.showToast({
                          title: "上传成功",
                          duration: 1500,
                          icon: "none",
                        });
                      },
                    });
                  }

                  // setTimeout(()=>{
                  // 	// console.log(file);
                  // 	let index = file.type.lastIndexOf("/");
                  // 	that.form.fileExtension = file.type.substring(index+1,file.type.length);
                  // 	that.form.fileSize = parseFloat(file.size / 1024).toFixed(1);
                  // 	that.uploadBase64(localDataToQNY)
                  // },0)
                },
              });
            },
          });
        });
      } else {
        // 其他浏览器
        uni.chooseImage({
          count: 1,
          sizeType: ["original"],
          extension: ["jpg", "png,", "jpeg"],
          // sizeType: ['original', 'compressed'],
          // sourceType: ['album','camera'],
          success: (res) => {
            let tempFilePaths = res.tempFilePaths;
            uni.showLoading({
              title: "上传中",
            });
            if (res.tempFiles[0].size / 1024 / 1024 > 3) {
              // 压缩
              that.$ImgCompress.photoCompress(
                res.tempFiles[0],
                {
                  quality: 0.8,
                  width: 1280,
                },
                (base64Codes) => {
                  let blob = that.$ImgCompress.convertBase64UrlToBlob(
                    base64Codes
                  );
                  let { lastModified, type } = res.tempFiles[0];
                  let compress_file = new File([blob], res.tempFiles[0].name, {
                    type: type,
                    lastModified: lastModified,
                  });
                  res.tempFiles[0] = compress_file;
                  console.log(res.tempFiles[0]);
                  that.form.fileName = res.tempFiles[0].name;
                  let index = res.tempFiles[0].name.lastIndexOf(".");
                  that.form.fileExtension = res.tempFiles[0].name.substring(
                    index + 1,
                    res.tempFiles[0].name.length
                  );
                  that.form.fileSize = parseFloat(
                    res.tempFiles[0].size / 1024
                  ).toFixed(1);
                  let putExtra = {
                    fname: res.tempFiles[0].name, //文件原文件名
                    params: {}, //用来放置自定义变量
                    // mimeLimit:"",
                    // mimeLimit: this.mimeLimit,
                    // 	mimeType: this.mimeType //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
                  };
                  var observable = qiniu.upload(
                    res.tempFiles[0],
                    null,
                    that.upToken,
                    putExtra,
                    config
                  );
                  observable.subscribe({
                    next: (result) => {
                      // 主要用来展示进度
                    },
                    error: (errResult) => {
                      uni.showToast({
                        title: errResult,
                        duration: 2000,
                        icon: "none",
                      });
                      uni.hideLoading();
                    },
                    complete: (result) => {
                      var url = encodeURI(
                        that.qiniuyun + "/" + result.key + "?imageMogr2/strip"
                      );
                      (that.form.fileUrl = url), uni.hideLoading();
                      uni.showToast({
                        title: "上传成功",
                        duration: 1500,
                        icon: "none",
                      });
                    },
                  });
                  // tempFilePaths.forEach((v, i) => {
                  // 	uni.uploadFile({
                  // 	url: "https://up-z0.qiniup.com",
                  // 	filePath: tempFilePaths[i],
                  // 	// filePath: "wxLocalResource://imageidRDpcUHJvZ3JhbSBGaWxlcyAoeDg2KVxQaWN0dXJlc1zmiL/pl7QuanBn",
                  // 	name: "file",
                  // 	formData: {
                  // 		token: this.upToken,
                  // 	},
                  // 	success: (uploadFileRes) => {
                  // 		this.form.fileUrl = this.qiniuyun + "/" + JSON.parse(uploadFileRes.data).key,
                  // 		// this.indexOfTime = 0;
                  // 		// this.koutu()
                  // 		uni.hideLoading();
                  // 		uni.showToast({
                  // 			title: "上传成功",
                  // 			duration: 1500,
                  // 			icon: "none",
                  // 		});
                  // 	},
                  // 	});
                  // });
                }
              );
            } else {
              that.form.fileName = res.tempFiles[0].name;
              let index = res.tempFiles[0].name.lastIndexOf(".");
              that.form.fileExtension = res.tempFiles[0].name.substring(
                index + 1,
                res.tempFiles[0].name.length
              );
              that.form.fileSize = parseFloat(
                res.tempFiles[0].size / 1024
              ).toFixed(1);
              let putExtra = {
                fname: res.tempFiles[0].name, //文件原文件名
                params: {}, //用来放置自定义变量
                // mimeLimit:"",
                // mimeLimit: this.mimeLimit,
                // 	mimeType: this.mimeType //用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
              };
              var observable = qiniu.upload(
                res.tempFiles[0],
                null,
                that.upToken,
                putExtra,
                config
              );
              observable.subscribe({
                next: (result) => {
                  // 主要用来展示进度
                },
                error: (errResult) => {
                  uni.showToast({
                    title: errResult,
                    duration: 2000,
                    icon: "none",
                  });
                  uni.hideLoading();
                },
                complete: (result) => {
                  var url = encodeURI(
                    that.qiniuyun + "/" + result.key + "?imageMogr2/strip"
                  );
                  (that.form.fileUrl = url), uni.hideLoading();
                  uni.showToast({
                    title: "上传成功",
                    duration: 1500,
                    icon: "none",
                  });
                },
              });
            }
          },
        });
      }
    },
    dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, {
        type: mime,
      });
    },
    getUpToken() {
      request({
        //获取七牛云参数
        url: "h5/home/uploadApplication",
        method: "post",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
        },
        data: {},
      }).then((res) => {
        this.upToken = res.data.data.upToken;
        this.region = res.data.data.region.split(".");
        this.qiniuyun = res.data.data.qiniuDomain;
        this.qiniuUrl = res.data.data.region;
      });
    },
    save() {
      let that = this;
      let token = uni.getStorageSync("token");
      // 自锁
      if (this.lock) {
        return;
      }
      this.lock = true;
      var timeoutflag = null;
      if (timeoutflag != null) {
        clearTimeout(timeoutflag);
      }
      timeoutflag = setTimeout(function () {
        this.lock = false;
      }, 3000);
      this.dataTongji("yqlw_h5_year_poster");
      request({
        //获取七牛云参数
        url: "h5/specialevents/save",
        method: "post",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
          token: token,
        },
        data: this.form,
      }).then((res) => {
        console.log(res);
        if ((res.data.code = 200)) {
          that.is_Show = true;
          that.haibaoData = res.data.data;
          that.handleShare(); //分享
          var timer = setInterval(() => {
            if (document.getElementById("img").complete) {
              //判断最后一个图像是不是加载完毕
              clearInterval(timer);
              that.toImg();
            } else {
              // uni.showLoading({
              // 	title: "海报生成中...",
              // });
            }
          }, 50);
        }
      });
    },
    dataTongji(val) {
      let token = uni.getStorageSync("token");
      request({
        //获取七牛云参数
        url: "h5/specialevents/insertInBatch",
        method: "post",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
          token: token,
        },
        data: {
          data: [
            {
              pointType: val,
            },
          ],
        },
      }).then((res) => {});
    },
    // koutu(){
    // 	let that = this
    // 	var postData ='api_key=hZG70SwrBSHlK_H1Ac7VdaMjkmHSE1AL&api_secret=emzlJkGLU7Bsn7zNpS5O10lcReQEYGqg&return_grayscale=0&image_url=' + this.form.fileUrl;
    // 	$.ajax({
    // 	    dataType: 'json',
    // 	    type: 'POST' ,
    // 	    url: 'https://api-cn.faceplusplus.com/humanbodypp/v2/segment',
    // 	    data: postData,
    // 	    success: function(response){
    // 	        if(typeof(response.error_message) == "undefined"){
    // 				that.uploadBase64(response.body_image);
    // 				uni.hideLoading();
    // 				this.indexOfTime = 0;
    // 	        }else{
    // 				this.indexOfTime++
    // 				if(this.indexOfTime < 2){
    // 					this.koutu();
    // 				}else{
    // 					uni.hideLoading();
    // 					that.base64Url = that.form.fileUrl;
    // 				}
    // 	            // todo: 在这里添加上传失败的逻辑
    // 	            // uni.showToast({
    // 	            // 	title: "请重新上传照片",
    // 	            // 	duration: 2000,
    // 	            // 	icon: "none",
    // 	            // });
    // 				// that.form.fileUrl = ''
    // 	        }
    // 	        // todo: 在这里添加隐藏上传提示图层的逻辑
    // 	        // $('.sk-wave-box').hide();
    // 	    },
    // 	    error: function(xhr, status, error){
    // 			console.log(that)
    // 	        that.indexOfTime++
    // 			if(that.indexOfTime < 3){
    // 				that.koutu();
    // 			}else{
    // 				uni.hideLoading();
    // 				that.base64Url = that.form.fileUrl;
    // 			}
    // 	        // todo: 在这里添加隐藏上传提示图层的逻辑
    // 	        // $('.sk-wave-box').hide();
    // 	    }
    // 	});
    // },
    uploadBase64(baseData) {
      let that = this;
      uni.request({
        url: "https://up.qiniu.com/putb64/-1",
        method: "post",
        header: {
          "Content-Type": "application/octet-stream",
          Authorization: "UpToken" + " " + this.upToken,
        },
        data: baseData,
        success: (res) => {
          that.form.fileUrl = that.qiniuyun + "/" + res.data.key;
          uni.hideLoading();
          uni.showToast({
            title: "上传成功",
            duration: 1500,
            icon: "none",
          });
        },
      });
    },

    // 图片旋转问题
    // dealImg(){
    // 		// uni-app中的用法：
    // 		    uni.chooseImage({
    // 						sizeType: ['original'],
    // 						extension:['jpg','png,','jpeg'],
    // 		        // sourceType: ['camera'],
    // 		        success: function (res) {
    // 							var allFiles = res.tempFilePaths;
    // 							var tmpimg = allFiles[0];
    // 							var file = res.tempFiles['0'];
    // 							//图片方向角 added by lzk
    // 							var Orientation = null;
    // 								// if (file) {
    // 							//     console.log("正在上传,请稍后...");
    // 							//     var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式
    // 							//     if (!rFilter.test(file.type)) {
    // 							//       return;
    // 									// }
    // 							//     // var URL = URL || webkitURL;
    // 							//     //获取照片方向角属性，用户旋转控制
    // 							EXIF.getData(file, function() {
    // 								// console.log(EXIF.pretty(this));
    // 								// EXIF.getAllTags(this);
    // 								Orientation = EXIF.getTag(this, 'Orientation');
    // 								if(Orientation && Orientation != 1){
    // 									console.log(EXIF.getTag(this, 'Orientation'));
    // 									switch(Orientation){
    // 										case 6://旋转90度
    // 										this.transform90 = true;
    // 										break;
    // 										case 3://旋转180度
    // 										this.transform180 = true;
    // 										break;
    // 										case 8://旋转-90度
    // 										this.transform901 = true;
    // 										break;
    // 									}
    // 								}
    // 							});
    // 		        }

    // 		    });
    // },
  },
};
</script>

<style lang="less">
.year-page {
  background: #ac1621;
  background-image: url("../../images/yearPage/top_left.png"),
    url("../../images/yearPage/flower2.png"),
    url("../../images/yearPage/flower3.png"),
    url("../../images/yearPage/bainianla.png"),
    url("../../images/yearPage/top_right.png");
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: -36rpx 0rpx, 568rpx 207rpx, 620rpx 176rpx, 165rpx 82rpx,
    638rpx 50rpx;
  background-size: 149rpx auto, 42rpx auto, 56rpx auto, 425rpx 155rpx,
    auto 78rpx;
  background-blend-mode: screen;
  overflow: hidden;

  .title-logo {
    height: 318rpx;
  }

  .top_right {
    width: 189rpx;
    height: 79rpx;
    position: absolute;
    top: 50rpx;
    right: -72rpx;
  }

  .form {
    background: url("../../images/yearPage/form-bg.png") no-repeat 0 0;
    background-size: 641rpx 285rpx;
    margin: 0 55rpx;
    width: 641rpx;
    height: 285rpx;
    padding: 24rpx 32rpx 64rpx 32rpx;
    box-sizing: border-box;

    .form-item {
      display: flex;
      justify-content: space-between;
      padding: 25rpx 0;

      .left-title {
        font-size: 34rpx;
        font-family: SourceHanSerifSC, SourceHanSerifSC-Regular;
        font-weight: 400;
        text-align: justify;
        color: #ac1621;
      }

      .placehold {
        opacity: 0.5;
        font-size: 32rpx;
        font-family: SourceHanSerifSC, SourceHanSerifSC-Regular;
        font-weight: 400;
        text-align: right;
        color: #ac1621;
      }

      .to-choose {
        display: flex;
        align-items: center;

        image {
          width: 32rpx;
        }
      }

      .input {
        opacity: 1;
        font-size: 32rpx;
        font-family: SourceHanSerifSC, SourceHanSerifSC-Regular;
        font-weight: 400;
        text-align: right;
        color: #ac1621;
        padding-left: 20rpx;
        flex: 1;
      }

      .picker {
        opacity: 1;
        font-size: 32rpx;
        font-family: SourceHanSerifSC, SourceHanSerifSC-Regular;
        font-weight: 400;
        text-align: right;
        color: #ac1621;
      }
    }

    .form-item-line {
      height: 7rpx;
      background: url("../../images/yearPage/line.png") 0 0 no-repeat;
      background-size: 100% 7rpx;
    }
  }

  .upload {
    margin: 0 54rpx 39rpx;

    .upload-title {
      padding: 40rpx 0 21rpx;
      display: flex;

      image {
        width: 100%;
      }
    }

    .upload-img {
      width: 642rpx;
      height: 296rpx;
      background: url("../../images/yearPage/upload-border.png") no-repeat 0 0;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      flex-direction: column;

      .upload-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 55rpx 33rpx;

        image {
          width: 70rpx;
          margin: 0 0 11rpx;
        }

        text {
          font-size: 34rpx;
          font-family: SourceHanSerifSC, SourceHanSerifSC-Regular;
          font-weight: 400;
          color: rgba(247, 228, 187, 0.8);
        }
      }

      .avatar {
        max-width: 100%;
        height: 296rpx;
      }
    }
  }

  .upload-img-title {
    font-size: 24rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: rgba(247, 228, 187, 0.6);
  }

  .finish {
    margin: 0 55rpx 28rpx;
    background: url("../../images/yearPage/finish-bg.png") no-repeat 0 0;
    background-size: 640rpx 84rpx;
    width: 640rpx;
    height: 84rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: bold;
    text-align: center;
    color: #ac1621;
    text-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.48) inset,
      0px 1px 0px 0px rgba(0, 0, 0, 0.26) inset;
  }

  .er-code {
    text-align: center;

    image {
      display: inline-block;
      width: 100rpx;
      margin: 58rpx 0 20rpx;
    }
  }

  .bottom {
    padding-bottom: 90rpx;
    text-align: center;

    a {
      color: rgba(247, 228, 187, 0.6);
    }
  }
}

.zhezhao {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.4);

  .popup {
    width: 640rpx;
    height: 1134rpx;
    position: absolute;
    top: 50vh;
    left: 55rpx;
    margin-top: -567rpx;
    box-sizing: border-box;

    .gb {
      width: 52rpx;
      height: 52rpx;
      position: absolute;
      top: -26rpx;
      right: -26rpx;
      z-index: 4;
    }

    .haibao {
      width: 640rpx;
      height: 1134rpx;
      background-color: #dae1ed;
      opacity: 1;
      position: relative;

      .bj {
        width: 100%;
        height: 100%;
      }

      .people {
        width: 328rpx;
        height: 328rpx;
        border: 6rpx solid rgba(247, 228, 187, 0.41);
        border-radius: 10rpx;
        position: absolute;
        top: 304rpx;
        left: 50%;
        margin-left: -164rpx;
        z-index: 3;

        // overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          border-radius: 7rpx;
          // position: absolute;
          // top: 0;
          // left: 0;
          // right: 0;
          // bottom: 0;
          // margin: auto;
        }
      }

      .ewm {
        width: 64rpx;
        height: 64rpx;
        position: absolute;
        left: 50%;
        bottom: 122rpx;
        margin-left: -32rpx;
        z-index: 3;
      }

      .gs {
        width: 312rpx;
        height: 74rpx;
        position: absolute;
        top: 83rpx;
        left: 50%;
        margin-left: -156rpx;
        text-align: center;
        z-index: 3;
        opacity: 1;
        font-size: 31rpx;
        font-family: PingFangSC, PingFangSC-Semibold;
        font-weight: 600;
        color: #f7e4bb;
        line-height: 37rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .name {
        width: 100%;
        position: absolute;
        top: 647rpx;
        left: 0;
        text-align: center;
        z-index: 3;
        opacity: 1;
        font-size: 24rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #f7e4bb;
        line-height: 33rpx;
      }
    }
  }
}

.btn {
  width: 750rpx;
  height: 70rpx;
  background-image: url(../../images/year/btn.png);
  background-size: 100% 100%;
  font-size: 30rpx;
  text-align: center;
  color: #ac1621;
  line-height: 69rpx;
  position: fixed;
  left: 0;
  bottom: -4rpx;
  opacity: 1;
  z-index: 3;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/deep/ .my-avatar {
  display: none;
}
</style>
